<template>
  <el-container direction="vertical">

    <navMenu width="100%"></navMenu>
    <el-container direction="horizontal">
      <el-aside width="280px" height="100%">
        <sideBar class="menu" page-index="4-3" open-index="4"></sideBar>
      </el-aside>
      <el-main>
        <el-card>
          <div>
            <h2>志愿者人数变化图</h2>
            <div id="chart_example"></div>
          </div>
          <div>
            <h2>志愿者年龄段统计图</h2>
            <div id="chart_example2"></div>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </el-container>

</template>


<script>
import sideBar from "@/components/sideBar";
import navMenu from "@/components/navMenu";
import * as echarts from 'echarts'

export default {
  components: {sideBar, navMenu},
  data() {
    return {
      emp_date:[5, 10, 3, 5, 2, 6, 10, 6, 8, 5, 7, 11],
      emp_age: [5,5,5,5,5]
    }
  },
  mounted() {
    this.drawLine(); //按照默认值绘制图表
  },
  methods: {
    drawLine() {
      let myChart = echarts.init( document.getElementById( 'chart_example' ) );
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985' }
          }
        },
        legend: {
          data: ['志愿者人数']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%', right: '4%', bottom: '3%', containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月',],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '志愿者人数', type: 'line', stack: '总量',
            label: {
              normal: {
                show: true, position: 'top'
              }
            }, areaStyle: {normal: {}}, data: this.emp_date
          }
        ]
      };
      myChart.setOption( option );

      let myChart2 = echarts.init(document.getElementById('chart_example2'));
      // 绘制图表
      // let emp_age = this.emp_age
      myChart2.setOption({
        tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          bottom: 'bottom',
          data: ['20-30岁','30-40岁','40-50岁','50-60岁','60岁以上']
        },
        series : [
          {
            name: '年龄段',
            type: 'pie',
            radius : '55%',
            center: ['50%', '50%'],
            data:[
              {value:this.emp_age[0], name:'20-30岁'},
              {value:this.emp_age[1], name:'30-40岁'},
              {value:this.emp_age[2], name:'40-50岁'},
              {value:this.emp_age[3], name:'50-60岁'},
              {value:this.emp_age[4], name:'60岁以上'}

            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
      window.addEventListener( 'resize', function () {
        myChart.resize()
        myChart2.resize()
      } );
    },
  },
  watch: {
    emp_age: {
      //对于深层对象的属性，watch不可达，因此对数组监控需要将数组先清空，再添加数据
      handler: function () {
        this.drawLine();
      },
      deep: true,
    },
    emp_date:{
      //对于深层对象的属性，watch不可达，因此对数组监控需要将数组先清空，再添加数据
      handler: function () {
        this.drawLine();
      },
      deep: true,
    }
  },
  created() {
    this.$axios.get("http://127.0.0.1:5000/volunteerage").then((res) => {
      // this.emp_age.fill(0); //数组清零
      this.emp_age.length=0;
      for(let i=0;i<5;i++){
        this.emp_age.push(0);
      }
      // console.log(this.emp_age);
      for (let i = 0; i < res.data.length; i++) {
        const age = parseInt( res.data[i].age );
        if(age>20&&age<=30){
          this.emp_age[0]+=1;
        }else if(age>30&&age<=40){
          this.emp_age[1]+=1;
        }else if(age>40&&age<=50){
          this.emp_age[2]+=1;
        }else if(age>50&&age<=60){
          this.emp_age[3]+=1;
        }else if(age>60){
          this.emp_age[4]+=1;
        }
      }
      this.emp_date.length=0;
      for(let i=0;i<12;i++){
        this.emp_date.push(0);
      }
      for (let j=0;j<12;j++){
        for (let i = 0; i < res.data.length; i++) {
          var hire_date=res.data[i].checkin_date.split("-")
          var resign_date=res.data[i].checkout_date
          if (resign_date!=null){
            resign_date=res.data[i].checkout_date.split("-")
            if (hire_date[1]<=j+1&&resign_date[1]>j+1){
              this.emp_date[j]+=1
            }
          }else{
            if (hire_date[1]<=j+1){
              this.emp_date[j]+=1
            }
          }
        }
      }
    });
  }
}
</script>
<style scoped>
h2 {
  text-align: center;
  padding: 30px;
  font-size: 18px;
}

#chart_example {
  width: 50%;
  height: 300px;
  border: 1px solid #000000;
  margin: 0 auto;
}
#chart_example2 {
  width: 50%;
  height: 300px;
  border: 1px solid #000000;
  margin: 0 auto;
}
</style>
